import React, {Component} from 'react';
import {Table,Button,Feedback,Dialog,Pagination} from '@icedesign/base';
import IceContainer from '@icedesign/container';
import IceLabel from '@icedesign/label';
import API from '../../../../tools/API';
import AddDict from './components/AddDict';
import DictDetailList from './components/DictDetailList';
import FoundationSymbol from 'foundation-symbol';
import QueryDict from './components/QueryDict';

/**
*  字典列表查询
*/
export default class SysDictList extends Component{
  constructor(props) {
     super(props);
     this.state = {
       isLoading:true,
       query:{
         parent_id:0
       },
       current:1,
       total:0,
       data:[],
       rowSelection: {
          onChange: this.onChange.bind(this),
          selectedRowKeys: []
       },
       detail:{
         isDetail:false,
       }
     }
     this.getDictListData = this.getDictListData.bind(this);
     this.deleteDict = this.deleteDict.bind(this);
     this.returnDictList = this.returnDictList.bind(this);
  }

  onChange(ids, records) {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = ids;
    this.setState({ rowSelection });
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.getDictListData();
  }

  getDictListData(){
    //获取当前登录用户信息
    API.getDictListData(this.state.query).then((res) => {
      //设置展开tree
      this.setState({
        data:res.result.list,
        isLoading:false,
        current:res.result.page_number,
        total:res.result.total_row
      });
    })
  }

  handlePaginationChange = (current) => {
    this.state.query["pageNum"] = current;
    this.setState(this.state);
    this.getDictListData();
  };

  //类型
  renderType = (value,index,record) =>{
    return (
      <div>
        {
          record.type == 0?
            <IceLabel status="success">启用</IceLabel>
          :
            <IceLabel status="danger">停用</IceLabel>
        }
      </div>
    )
  }

  //删除字典
  deleteDict(){
    const ids = this.state.rowSelection.selectedRowKeys;
    if (ids.length === 0) {
      Feedback.toast.prompt("请选择删除的记录");
      return;
    }
    let dialog = Dialog.confirm({
      content: "确定要删除吗？",
      locale: {
        ok: "确认",
        cancel: "取消"
      },
      onOk: () => {
        return new Promise(resolve => {
          API.delteDict({ids:this.state.rowSelection.selectedRowKeys}).then((res) => {
            Feedback.toast.success("删除成功");
            this.getDictListData();
            dialog.hide();
          });
        });
      }
    });
  }

  //跳转字典详情
  renderValue(value,index,record){
    return(
      <div>
        <a href="javaScript:;" onClick={()=>{
            this.setState({
              detail:{
                isDetail:true,
                id:record.id,
                value:record.value,
              }
            })
          }}>{record.value}</a>
      </div>
    )
  }

  //返回列表
  returnDictList(){
    this.setState({detail:{isDetail:false}});
  }

  //操作
  renderCaozuo(value,index,record){
    return (
      <div>
        <AddDict reload={this.getDictListData} dict={record}/>
        <span style={{marginLeft:10}}>
          <a href="javaScript:;" onClick={()=>{
              this.setState({
                detail:{
                  isDetail:true,
                  id:record.id,
                  value:record.value,
                }
              })
            }}>列表</a>
        </span>
      </div>
    )
  }

  render(){
    const { current } = this.state;
    const { total } = this.state;
    return(
      <div>
        {
          this.state.detail.isDetail?
            <DictDetailList
              parentId={this.state.detail.id}
              value={this.state.detail.value}
              return={this.returnDictList}/>
          :
            <IceContainer title="字典列表" loading={this.state.isLoading}>
                <QueryDict
                  updateQuery={(json)=>{
                    this.state.query = json;
                    this.setState(this.state);
                    this.getDictListData();
                  }}
                  parentId={0}/>
                <div className="menu-caozuo">
                  <AddDict reload={this.getDictListData}/>
                  <span style={{margin:'0 5px'}}>
                    <Button onClick={this.deleteDict} type="primary"  shape="warning">
                      <FoundationSymbol size="small" type="delete" /> 删除
                    </Button>
                  </span>
                </div>
                <Table
                  dataSource={this.state.data}
                  hasBorder={false}
                  primaryKey="id"
                  isTree = {true}
                  indentSize={12}
                  rowSelection={this.state.rowSelection}
                >
                  <Table.Column align={"center"} width={110} title="字典名称" dataIndex="label"/>
                  <Table.Column align={"center"} width={110}title="字典类型" cell={this.renderValue.bind(this)} />
                  <Table.Column align={"center"} width={70} title="排序" dataIndex="sort"/>
                  <Table.Column align={"center"} width={70} title="状态" cell={this.renderType.bind(this)}/>
                  <Table.Column align={"center"} width={150}title="备注" dataIndex="remarks" />
                  <Table.Column align={"center"} width={160}title="时间" dataIndex="create_date" />
                <Table.Column align={"center"} width={140} title="操作" cell={this.renderCaozuo.bind(this)}  />
                </Table>
                <Pagination
                  style={{
                    marginTop: '20px',
                    textAlign: 'right',
                  }}
                  current={current}
                  onChange={this.handlePaginationChange}
                  total={total}
                />
              </IceContainer>
        }
      </div>
    )
  }

}
